<template>
  <div class="forgetPassword ">
      <el-container>   
          <div class="main">
                <div class="left"></div>
             <el-form :model='loginForm' :rules='rules' hide-required-asterisk  ref='loginForm' class='loginForm'>
                <h3 class="text-center">找回密码</h3>
                <!-- <p class="text-center">领取$100,000体验金</p> -->
                <el-form-item label="" prop="phone">
                  <el-input   prefix-icon="el-icon-mobile-phone" @blur=" getSalts" v-model="loginForm.phone" placeholder="手机号"></el-input>
                </el-form-item> 
                <el-form-item label="" prop="verifyCode">
                  <el-input  prefix-icon=""  v-model="loginForm.verifyCode"  placeholder="输入验证码">              
                      <el-button slot="append"
                          v-if="!countDown"
                          class="verification "                   
                          @click.prevent="getVerify()"
                        style="color:#fff;">
                          获取验证码
                        </el-button>
                        <el-button slot="append"
                          v-else
                          disabled="disabled">
                          已发送({{countDown}}s)
                        </el-button>
                  </el-input>
                </el-form-item> 
                <el-form-item label="" prop="password">
                  <el-input prefix-icon="el-icon-lock" v-model="loginForm.password"  placeholder="新密码"></el-input>
                </el-form-item>
           
            
            <!-- <el-form-item label="" prop="inviter">
              <el-input prefix-icon="el-icon-user" v-model="loginForm.inviter"  placeholder="IB经纪人编号"></el-input>
            </el-form-item>  -->

            <el-form-item label="" class="text-center " style="margin-top:80px;" >
                <el-button size='medium' style="width:100%;letter-space:4px;"  type="primary" @click="submitForm('loginForm')">找回密码</el-button>
            </el-form-item> 
            <div style="width:65%;margin:20px auto;">
              <span class="hand font-gray " @click="goRegister()">没有账号,去注册</span>
              <span class="hand font-gray pull-right" @click="goLogin()">登录</span>
              </div>     
          </el-form>
          </div>
           
        </el-container>
    

  </div>
</template>


<script>
import Cookies from "js-cookie" 
import {forgetPwd,getSalt,getVerifyCode} from './../ajax/index'
import {regPhone} from './../assets/js/rule'
export default {
  components: {
  },
  name: 'ForgetPassword',
  data () {
    return {
      value:true,
      verifyCode: '',
      countDown: 0,//倒计时
       loginForm: {
        phone:'',
        verifyCode:'',
        password:'',
      },
      rules: {
        phone:[
          {required: true, message: '请输入手机号', trigger: ['blur','change']},
        ],
        verifyCode:[
          {required: true, message: '请输入验证码', trigger: ['blur','change']},
        ],
        password:[
          {required: true, message: '请输入新密码', trigger: ['blur','change']},
        ],
      }
    }
  },
  methods:{
      regPhone,
       // 提交登陆
      submitForm(formName) {    
          // let password = this.loginForm.password
          // password = this.$md5(password)  
          // debugger;
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.login();
          } else {
            return false;
          }
        });
      },
     
      // @description: 获取短信验证码 
        async getVerify() {
          if (regPhone(this.loginForm.phone)) {
              const param = {
                    'phoneNum': this.loginForm.phone
              }
              let result = await getVerifyCode(param);
              if(result.code === '200' && result.data.state === '1'){
                    this.loginForm.verifyCode = result.data.data;
                    console.log(this.verifyCode);
              }else{
                    this.$message({
                        message:result.data.message,
                        type: 'error',
                        duration:2000,               
                    });
                    return false;
              }
              this.countDown = 60;
              this.intervalId = setInterval(() => {
                this.countDown--;
                // 判断
                if (this.countDown === 0) {
                  clearInterval(this.intervalId);
                }
              }, 1000);
            }else{
              this.$message({
                    message: '请输入正确的手机号',
                    type: 'error',
                    duration:2000,               
                });
                return false;
            }
          
      },
        async getSalts(){
          if (!regPhone(this.loginForm.phone)) return false; 
          const param = {
              'phoneNum': this.loginForm.phone,
              'state': 2   // 登录是1
          }
          let result =  await getSalt(param);
            console.log(result);
          if(result.code === '200' && result.data.state === '1'){
                this.salt = result.data.data;
                console.log(this.salt);
          }else{
              alert(result.data.message);
          }
      },
      async login(){  
          let password = this.loginForm.password
          if(this.salt == ""){
            alert('生成盐失败，请稍后再试')
            return false
          }  
          password = this.$md5(password+this.salt)
          debugger;
          const param = {
            'phoneNum': this.loginForm.phone,
            'password': password,
            'verifyCode':this.loginForm.verifyCode
          }
          const result = await forgetPwd(param);              
          if(result.code === '200' && result.data.state === '1'){
              this.$store.commit('updateUserId',result.data.data.customerId);  
              this.$store.commit('updateUserInfo',result.data.data); 
              alert('修改成功！');
              this.$router.push({path:'/home'})
          }else{
            alert(result.data.message);
          }
      },
      goRegister(){
        this.$router.push({path:'register'})
      },
      goLogin(){
        this.$router.push({path:'login'})
      },     
  }
}
</script>
<style>

 .el-form-item__error{color: red}
  .el-form-item.is-error .el-input__inner{border:2px solid #4ec2e3;}
  .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus{border:none;background: rgba(117,119,173,0.2)}
  .el-input-group--append .el-input__inner, .el-input-group__prepend{background: rgba(117,119,173,0.2);border: none;}
  .el-input--prefix .el-input__inner{background: rgba(117,119,173,0.2);border:none;text-indent: 10px;}
  .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus{color: #FFF;}
  .el-input__icon{color: #fff;}
  .el-input-group--prepend .el-input__inner, .el-input-group__append{background: rgba(117,119,173,0.2)!important;border: none}
  .el-input-group__append button.el-button{border:none}
  .loginForm .verification span{padding-left: 10px;padding-top: 4px;padding-bottom: 4px;border-left: 1px solid #fff;}
</style>


<style lang='less' scoped>

 .font-white{color: #fff;}
  .main{position: relative;width: 800px;height:500px;margin: 160px auto;overflow: hidden;}
  .left{width: 240px;height: 100%;  background: linear-gradient(to bottom, #4ec2e3 , #4e89e3);float: left;}
  .loginForm{padding-top:40px;  width: calc(100% - 240px);height: 100%;background-color:#252647;float: left;}
   h3{font-size: 30px;color: #4ec2e3;font-weight: normal;}
  .loginForm p{font-size: 14px;line-height: 30px;}
  .el-form-item{width: 360px;margin: 20px auto 0;}
</style>
